package com.example.myapplication.base

import com.example.sihookuiklydemo.base.BasePager
import com.example.sihookuiklydemo.base.MyScrollPicker
import com.example.sihookuiklydemo.ble.getNewFloatPx
import com.example.sihookuiklydemo.utils.getCancelText
import com.example.sihookuiklydemo.utils.getConfirmText
import com.example.sihookuiklydemo.utils.getLanguage
import com.tencent.kuikly.core.base.Animation
import com.tencent.kuikly.core.base.Color
import com.tencent.kuikly.core.base.ComposeView
import com.tencent.kuikly.core.base.ComposeAttr
import com.tencent.kuikly.core.base.ComposeEvent
import com.tencent.kuikly.core.base.Translate
import com.tencent.kuikly.core.base.ViewBuilder
import com.tencent.kuikly.core.base.ViewContainer
import com.tencent.kuikly.core.base.event.EventHandlerFn
import com.tencent.kuikly.core.directives.vforIndex
import com.tencent.kuikly.core.log.KLog
import com.tencent.kuikly.core.module.NotifyModule
import com.tencent.kuikly.core.nvi.serialization.json.JSONObject
import com.tencent.kuikly.core.reactive.collection.ObservableList
import com.tencent.kuikly.core.reactive.handler.observable
import com.tencent.kuikly.core.reactive.handler.observableList
import com.tencent.kuikly.core.views.ScrollPicker
import com.tencent.kuikly.core.views.Scroller
import com.tencent.kuikly.core.views.Switch
import com.tencent.kuikly.core.views.Text
import com.tencent.kuikly.core.views.View
import com.tencent.kuikly.core.views.compose.Button

internal class LanguageActionSheetView :
    ComposeView<LanguageActionSheetViewAttr, LanguageActionSheetEvent>() {
    var animated: Boolean by observable(false)
    private var chooseIdx: Int by observable(0)
    private var chooseValue: String by observable("")
    var didFirstLayout = false
    private var languageList by observableList<String>()
    override fun created() {
        super.created()
        initLanguageList()
    }

    fun initLanguageList(){
        var defaultList=arrayOf(
            "中文",
            "英文",
            "法语",
            "德语",
            "荷兰语",
            "意大利语",
            "西班牙语",
            "波兰语"
        )

        var desk_language_list=getLanguage("desk_language_list","")
        if(!desk_language_list.isNullOrEmpty()){
            var defaultSplit=" "
            if(desk_language_list.contains("、")){
                defaultSplit="、"
            }
            if(desk_language_list.contains(",")){
                defaultSplit=","
            }
            var dataArray=desk_language_list.split(defaultSplit)
            languageList.addAll(dataArray)
        }else{
            languageList.addAll(defaultList)
        }
    }
    override fun createEvent(): LanguageActionSheetEvent {
        return LanguageActionSheetEvent()
    }

    override fun createAttr(): LanguageActionSheetViewAttr {
        return LanguageActionSheetViewAttr()
    }

    override fun body(): ViewBuilder {
        val ctx = this
        return {
            attr {
                absolutePosition(0f, 0f, 0f, 0f)
                justifyContentFlexEnd()
                if (ctx.animated) {
                    backgroundColor(Color(0, 0, 0, 0.5f))
                } else {
                    backgroundColor(Color(0, 0, 0, 0f))
                }
                animation(Animation.springEaseIn(0.5f, 0.92f, 1f), ctx.animated)
                /* padding(16f)*/

            }
            event {
                click {
                    ctx.animated = false
                }
                animationCompletion {
                    if (!ctx.animated) {
                        KLog.i("ActionSheetView", "animationCompletion $it")
                        ctx.event.cancelClickHandler?.invoke()
                        //this@LanguageActionSheetView.emit(LanguageActionSheetEvent.CLOSE, ctx.chooseValue);
                    }
                }
            }

            View {

                View {
                    attr {

                        alignSelfCenter()
                        backgroundColor(0xffe0e2e7)
                        size(40f, 3f)
                        marginTop(6f)
                        borderRadius(2f)

                    }
                }

                event {
                    click { }

                }
                attr {
                    backgroundColor((getPager() as BasePager).theme.colors.background)

                    paddingBottom(30f)
                    borderRadius(16f, 16f, 0f, 0f)
                    if (ctx.animated) {
                        transform(Translate(0f, 0f))
                    } else {
                        transform(Translate(0f, 1f))
                    }


                    animation(Animation.springEaseIn(0.5f, 0.92f, 1f), ctx.animated)
                }
                Text {
                    attr {
                        text(getLanguage("desk_change_lanuage","语言切换"))
                        color((getPager() as BasePager).theme.colors.mainTextColor)
                        fontSize(getNewFloatPx(16f))
                        marginTop(getNewFloatPx(16f))
                        alignSelfCenter()
                        useDpFontSizeDim(true)
                    }
                }
                MyScrollPicker(
                    ctx.languageList, defaultIndex = ctx.attr.currentIndex
                ) {
                    attr {
                        marginTop(getNewFloatPx(20f))
                        marginBottom(getNewFloatPx(20f))
                        borderRadius(8f)
                        itemWidth = getNewFloatPx(100f)
                        itemHeight = getNewFloatPx(40f)
                        countPerScreen = 5
                        itemBackGroundColor = Color.TRANSPARENT

                        itemTextColorCenter = (getPager() as BasePager).theme.colors.mainTextColor
                        alignSelfCenter()

                    }
                    event {
                        dragEndEvent { centerValue, centerItemIndex ->
                            ctx.chooseIdx = centerItemIndex
                            ctx.chooseValue = centerValue
                        }
                    }
                }
                View {
                    attr {
                        flexDirectionRow()
                        marginTop(getNewFloatPx(8f))
                    }
                    Button {

                        attr {
                            titleAttr {
                                text(getCancelText())
                                useDpFontSizeDim(true)
                                color((getPager() as BasePager).theme.colors.mainTextColor)
                            }
                            size(
                                (ctx.pagerData.pageViewWidth - getNewFloatPx(48f)) / 2f,
                                getNewFloatPx(45f)
                            )
                            marginRight(getNewFloatPx(16f))
                            marginLeft(getNewFloatPx(16f))
                            borderRadius(getNewFloatPx(25f))
                            backgroundColor((getPager() as BasePager).theme.colors.grey_1a)
                        }
                        event {

                            click {
                                ctx.animated = false
                                ctx.event.cancelClickHandler?.invoke()
                            }
                            /*animationCompletion {
                                if (!ctx.animated) {
                                    KLog.i("ActionSheetView", "animationCompletion $it")
                                    this@LanguageActionSheetView.emit(LanguageActionSheetEvent.CLOSE, ctx.chooseValue);
                                }
                            }*/
                        }
                    }
                    Button {

                        attr {
                            titleAttr {
                                text(getConfirmText())
                                useDpFontSizeDim(true)
                                color(Color.WHITE)
                            }
                            marginRight(getNewFloatPx(16f))
                            size(
                                (ctx.pagerData.pageViewWidth - getNewFloatPx(48f)) / 2f,
                                getNewFloatPx(45f)
                            )
                            backgroundColor(Color.RED)
                            borderRadius(getNewFloatPx(25f))

                        }
                        event {
                            click {
                                ctx.animated = false
                                ctx.event.confirmClickHandler?.invoke(
                                    ctx.chooseValue,
                                    ctx.chooseIdx
                                )
                            }
                            /*animationCompletion {
                                if (!ctx.animated) {
                                    KLog.i("ActionSheetView", "animationCompletion $it")
                                    this@LanguageActionSheetView.emit(LanguageActionSheetEvent.CLOSE, ctx.chooseValue);
                                }
                            }*/
                        }
                    }
                }

            }


        }
    }

    var offsetY by observable(0f)
    override fun viewDidLayout() {
        super.viewDidLayout()
        animated = true
    }
}


internal class LanguageActionSheetViewAttr : ComposeAttr() {
    var currentIndex = 0
}

internal class LanguageActionSheetEvent : ComposeEvent() {
    var cancelClickHandler: (() -> Unit)? = null
    var confirmClickHandler: ((languageName: String, position: Int) -> Unit)? = null

    fun onCancelClick(handler: () -> Unit) {
        cancelClickHandler = handler
    }

    fun onConfirmClick(handler: (deviceName: String, position: Int) -> Unit) {
        confirmClickHandler = handler
    }
}

internal fun ViewContainer<*, *>.LanguageActionSheetEvent(init: LanguageActionSheetView.() -> Unit) {
    addChild(LanguageActionSheetView(), init)
}